<template>
    <div id="Header">
        <!-- 免费咨询 -->
        <!-- CT图像处理字（可删除放图片） -->
        <div id="word" >
            <el-image src="src/assets/logo.jpg"></el-image>
            <h1>{{msg}}</h1>
        </div>

        <!-- 导航栏 -->
<!--        <el-menu-->
<!--            :default-active="activeIndex"-->
<!--            class="el-menu-demo"-->
<!--            id="menu"-->
<!--            mode="horizontal"-->
<!--            @select="handleSelect"-->
<!--        >-->
<!--            <el-menu-item index="1">处理中心</el-menu-item>-->
<!--            <el-submenu index="2">-->
<!--                <template slot="title">我的工作台</template>-->
<!--                <el-menu-item index="2-1">选项1</el-menu-item>-->
<!--                <el-menu-item index="2-2">选项2</el-menu-item>-->
<!--                <el-menu-item index="2-3">选项3</el-menu-item>-->
<!--                <el-submenu index="2-4">-->
<!--                    <template slot="title">选项4</template>-->
<!--                    <el-menu-item index="2-4-1">选项1</el-menu-item>-->
<!--                    <el-menu-item index="2-4-2">选项2</el-menu-item>-->
<!--                    <el-menu-item index="2-4-3">选项3</el-menu-item>-->
<!--                </el-submenu>-->
<!--            </el-submenu>-->
<!--            <el-menu-item index="0">处理中心</el-menu-item>-->
<!--            <el-menu-item index="1">处理中心</el-menu-item>-->
<!--        </el-menu>-->
    </div>
</template>
<script>
    export default {
        name: "Header",
        data() {
            return {
                // msg: "基于机器学习和图像识别的黄蜂检测系统",
                msg: "易知狗——基于 Mask-RCNN 的狗狗姿态估计情绪检测系统",
                activeIndex: "1",
                logo:require('../assets/logo.jpg')
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    };
</script>
<style scoped>
    #Header {
        /*padding: 30px 110px 0 150px;*/
        width: 90%;
        /*margin: 10px auto;*/
    }

    #word {
        align-content: center;
        /*margin-left: 45%;*/
        /*margin-top: -35px;*/
        /*margin-bottom: 37px;*/
        /*height: 60px;*/
        /*!* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); *!*/
        /*line-height: 3.2em;*/
    }

    h1 {
        text-align: center;
        color: #21b3b9;
        /*letter-spacing: 20px;*/
        font-size: 1.3em;
    }

    .el-menu-demo {
        width: 80%;
        margin: 0px auto;
        padding: 0px auto;
    }

    .top-left-edition span i {
        float: left;
        margin-right: 10px;
    }

    i,
    input,
    label {
        vertical-align: middle;
    }

    i {
        border: 0;
        display: block;
        cursor: pointer;
    }

    .top-left-edition span {
        float: left;
        font-size: 16px;
        color: #999999;
        line-height: 24px;
        margin-right: 40px;
    }
</style>


